<template>
	<view>

		<u-sticky>
			<view class="search">
				<view class="search_ipt flex alignC">
					<u-icon name="search" size="30" color="#BFBFBF" style="margin: 0 20rpx;"></u-icon>
					<u-input v-model="queryParam" placeholder="根据医院、姓名搜索" style="width: 100%;"/>
				</view>
				<view class="search_btn flex fcenter" @tap="gotoSearch">搜索</view>
			</view>
			<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#3FBEBB" inactive-color="#6F6F6F">
				<u-dropdown-item v-model="value1" title="按科室找" :options="deptList" @change="change"></u-dropdown-item>
			</u-dropdown>
		</u-sticky>

		<view class="list_box">
			<view class="list_item align-center" v-for="(item, index) in doctorList" :key="item.id" @click="toPage(`/subpkg/doctorIntro/doctorIntro?id=${item.id}`)">
				<image :src="item.image ? item.image : '/static/logo.png'" mode=""></image>
				<view class="right flex flexColumn">
					<view class="align-center">
						<view style="font-size: 32rpx;color: #000000;">{{ item.name }} </view>
						<view style="font-size: 22rpx;color: #A4A4A4;margin-left: 16rpx;">
							<span
								v-if="item.professionalTitle">{{ item.professionalTitle }}·</span>{{ item.department }}
						</view>
					</view>
					<view style="font-size: 24rpx;color: #A4A4A4;margin-top: 16rpx;">{{ item.hospital }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getdeptListApi
	} from '@/common/api/lectureApi.js'
	import {
		getDoctorListApi
	} from '@/common/api/doctorApi'
	export default {
		data() {
			return {
				value1: 1,
				deptList: [],
				doctorList: [],
				department: '',
				finish: false,
				queryParam: ''
			}
		},
		async onLoad() {
			await this.getdeptList()
		},
		onReachBottom() {
			if (this.finish) return uni.$showToast('已经到底啦');
			if (this.valve) return uni.$showToast('数据请求中,请稍候')
			this.pageNum = this.pageNum + 1
			this.getDoctorList()
		},
		methods: {
			gotoSearch() {
				this.doctorList = []
				this.pageNum = 1
				this.getDoctorList()
			},
			// 科室分类
			async getdeptList() {
				const res = await getdeptListApi()
				this.deptList = res.data
				this.department = this.deptList[0].label
				this.doctorList = []
				this.getDoctorList()
			},
			// 获取医生列表
			async getDoctorList() {
				const res = await getDoctorListApi({
					name: this.doctorName,
					pageNum: 1,
					pageSize: 1000,
					hospital: '',
					department: this.department,
					queryParam: this.queryParam
				})
				if (!res.data.records.length) {
					this.finish = true
					uni.$showToast('已经到底啦')
				}
				this.doctorList.push(...res.data.records)

			},
			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},
			change(index) {
				console.log(index)
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				// this.$refs.uDropdown.highlight(xxx);
				this.department = this.deptList[index].label
				this.doctorList = []
				this.getDoctorList()
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.search {
		margin: 30rpx;
		position: relative;
		background: #F5F5F5;
		height: 62rpx;
		border-radius: 35rpx;
		.search_ipt{
			width: 85%;
			height: 100%;
		}
		.search_btn {
			width: 96rpx;
			height: 46rpx;
			background: #3FBEBB;
			color: #FFFFFF;
			font-size: 24rpx;
			position: absolute;
			right: 8rpx;
			top: 8rpx;
			border-radius: 23rpx;
		}
	}

	.u-cell {
		justify-content: center;
	}

	/deep/.u-dropdown__content {
		height: 1060rpx !important;
		overflow: scroll !important;
	}

	.u-border-bottom:after {
		border-bottom: none;
	}

	.list_box {
		height: calc(100vh - 260rpx);
		overflow: scroll;

		.list_item {
			height: 208rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 32rpx;
			margin: 30rpx;
			padding: 30rpx;

			image {
				width: 148rpx;
				height: 148rpx;
				margin-right: 24rpx;
				border-radius: 50%;
			}
		}
	}
</style>